<template>
    <view class="container">
        <view class="menu-group">
            <view class="menu-item" @tap="navigateTo('/pages/mine/change-password')">
                <text class="title">修改密码</text>
                <view class="arrow"></view>
            </view>
            <view class="menu-item">
                <text class="title">消息通知</text>
                <switch 
                    :checked="settings.notification" 
                    @change="toggleSetting('notification')"
                />
            </view>
            <view class="menu-item">
                <text class="title">声音提示</text>
                <switch 
                    :checked="settings.sound" 
                    @change="toggleSetting('sound')"
                />
            </view>
        </view>

        <view class="menu-group">
            <view class="menu-item" @tap="clearCache">
                <text class="title">清除缓存</text>
                <text class="value">{{ cacheSize }}</text>
                <view class="arrow"></view>
            </view>
            <view class="menu-item">
                <text class="title">当前版本</text>
                <text class="value">{{ version }}</text>
            </view>
        </view>

        <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
</template>

<script>
import { logout } from '@/api/user'
import { getSettings, updateSettings } from '@/api/settings'

export default {
    data() {
        return {
            settings: {
                notification: true,
                sound: true
            },
            cacheSize: '0.00MB',
            version: '1.0.0'
        }
    },
    onLoad() {
        this.initSettings()
        this.getCacheSize()
    },
    methods: {
        // 初始化设置
        async initSettings() {
            try {
                const res = await getSettings()
                this.settings = res
            } catch (error) {
                console.error('获取设置失败', error)
            }
        },
        
        // 切换设置
        async toggleSetting(key) {
            try {
                this.settings[key] = !this.settings[key]
                await updateSettings({
                    [key]: this.settings[key]
                })
            } catch (error) {
                // 还原设置
                this.settings[key] = !this.settings[key]
                uni.showToast({
                    title: '设置失败',
                    icon: 'none'
                })
            }
        },
        
        // 获取缓存大小
        async getCacheSize() {
            try {
                const res = await uni.getStorageInfo()
                const size = (res.currentSize / 1024).toFixed(2)
                this.cacheSize = size + 'MB'
            } catch (error) {
                console.error('获取缓存大小失败', error)
            }
        },
        
        // 清除缓存
        clearCache() {
            uni.showModal({
                title: '提示',
                content: '确定要清除缓存吗？',
                success: async (res) => {
                    if (res.confirm) {
                        try {
                            await uni.clearStorage()
                            this.cacheSize = '0.00MB'
                            uni.showToast({
                                title: '清除成功',
                                icon: 'success'
                            })
                        } catch (error) {
                            uni.showToast({
                                title: '清除失败',
                                icon: 'none'
                            })
                        }
                    }
                }
            })
        },
        
        // 退出登录
        handleLogout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: async (res) => {
                    if (res.confirm) {
                        try {
                            await logout()
                            // 清除本地存储
                            uni.removeStorageSync('token')
                            // 清除全局用户信息
                            getApp().globalData.userInfo = {}
                            // 跳转到登录页
                            uni.reLaunch({
                                url: '/pages/login/index'
                            })
                        } catch (error) {
                            uni.showToast({
                                title: '退出失败',
                                icon: 'none'
                            })
                        }
                    }
                }
            })
        },
        
        navigateTo(url) {
            uni.navigateTo({ url })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    
    .menu-group {
        background-color: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 30rpx;
            
            &:not(:last-child) {
                border-bottom: 1rpx solid #eee;
            }
            
            .title {
                flex: 1;
                font-size: 28rpx;
                color: #333;
            }
            
            .value {
                font-size: 28rpx;
                color: #999;
                margin-right: 10rpx;
            }
            
            .arrow {
                width: 16rpx;
                height: 16rpx;
                border-top: 4rpx solid #ccc;
                border-right: 4rpx solid #ccc;
                transform: rotate(45deg);
            }
            
            switch {
                transform: scale(0.8);
            }
        }
    }
    
    .logout-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: #fff;
        color: #f44336;
        font-size: 32rpx;
        border-radius: 12rpx;
        margin-top: 40rpx;
    }
}
</style> 